<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 快速且主动的拉取API数据，一般由后端提供API，用json-server/books模拟一下 
        // 二进制流文件，必须要json化变成json结果 
        // 跨域：只要端口、协议、域名不一样就叫跨域
        // 前端主动发送JS请求，拉取数据
        // 5555-网页端口    3000-API服务
        const f = fetch('http://localhost:3000/books');
        const f2 = fetch('http://localhost:3000/publisher');
        (async() => {
            try {
                const booksRes = await f; //await 后面是promise resolved后的值给左边
                const books = await booksRes.json();
                console.log(books);
                const publisherRes = await f2;
                const publisher = publisherRes.json();
                console.log(publisher);
            } catch (e) {
                console.log(e);
            }
        })()
        // console.log(f instanceof Promise);
        // https://localhost 是本地域名   wesbos.com CROS跨域了
        // f
        //     .then(res => res.json())
        //     .then(res => {
        //         console.log(res);
        //     })
        // const f2 = fetch('http://localhost:3000/publisher')
        // Promise
        //     .all([f, f2]) //并发请求的判断，判断f,f2是否全部请求完成,按照顺序完成请求
        //     .then(response => Promise.all(
        //         response.map(
        //             res => res.json()
        //         )
        //     ))
        //     .then(response => {
        //         console.log(response);
        //     })
        // Promise
        //     .race([f, f2])
        //     .then(response => response.json())
        //     .then(res => {
        //         console.log(res);
        //     })
        //     .catch(err => {
        //         console.log(err);
        //     })
    </script>
</body>

</html>